<div id="home" class="mdl-grid">
    <div class="mdl-cell mdl-cell--12-col">
        <div class="p-section">
            <div class="p-section-head">产品信息</div>
            <div class="p-section-content" style="height: 404px; margin-top: 15px;">
                <div id="product-info"></div>
            </div>
        </div>
    </div>

    <!--<div class="mdl-cell mdl-cell&#45;&#45;8-col">-->
        <!--<div class="p-section">-->
            <!--<div class="p-section-head">图表展示</div>-->
            <!--<div class="p-section-content">-->
                <!--<div id="mychart" style="width: 100%; height: 350px;"></div>-->
            <!--</div>-->
        <!--</div>-->
    </div>

    <div class="mdl-cell mdl-cell--4-col">
        <div class="p-section">
            <button id="show-dialog" type="button" class="content-edit button button-tiny button-3d button-primary button-rounded">我弹一个窗啊！</button>
        </div>
    </div>

    <!--弹窗-->
    <dialog class="mdl-dialog">
        <h4 class="mdl-dialog__title">- 弹窗标题 -</h4>
        <div class="mdl-dialog__content">
            <p>
                弹窗正文内容……
            </p>
        </div>
        <div class="mdl-dialog__actions">
            <button type="button" class="mdl-button">确定</button>
            <button type="button" class="mdl-button close">取消</button>
        </div>
    </dialog>
</div>

<!--page javascript-->
<script>
    $(document).ready(function () {

        componentHandler.upgradeAllRegistered()         // 重注册material-UI的事件

        // 弹窗
        var dialog = document.querySelector('dialog')   // 需要用原生获取dom，material默认没有加载jquery
        $('#show-dialog').on('click', function () {
            dialog.showModal()
        })
        dialog.querySelector('.close').addEventListener('click', function () {
            dialog.close();
        })

        var url = '/avBackend/src/js/testJson.txt'
        var source =
        {
            dataType: "json",
            dataFields: [
                { name: 'name', type: 'string' },
                { name: 'type', type: 'string' },
                { name: 'calories', type: 'int' },
                { name: 'totalfat', type: 'string' },
                { name: 'protein', type: 'string' }
            ],
            id: 'id',
            url: url
        };
        var dataAdapter = new $.jqx.dataAdapter(source)
        $("#product-info").jqxDataTable({
            width: '100%',
            height: '400px',
            theme: 'metro',
            editable: true,
            pageable: true,
            filterable: true,
            pagerHeight: 30,
            localization:{
                filterSearchString: '搜索',
            },
            filterHeight: 40,
            filterMode: 'simple',
            pagerButtonsCount: 10,
            source: dataAdapter,
            columnsResize: true,
            columnsHeight: 40,
            columns: [
              { text: 'Name', dataField: 'name', width: 300 },
              { text: 'Beverage Type', dataField: 'type', width: 300 },
              { text: 'Calories', dataField: 'calories', width: 180 },
              { text: 'Total Fat', dataField: 'totalfat', width: 120 },
              { text: 'Protein', dataField: 'protein' }
            ]
        })

        /**
         * 图表
         */
        /*var myChart = echarts.init(document.getElementById('mychart'), 'macarons');
        myChart.setOption({

            grid: {
                bottom: 40
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['最高气温', '最低气温']
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    name: '最高气温',
                    type: 'line',
                    data: [11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    }
                },
                {
                    name: '最低气温',
                    type: 'line',
                    data: [1, -2, 2, 5, 3, 2, 0],
                    markPoint: {
                        data: [
                            { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' },
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: '最大值'
                                    }
                                },
                                type: 'max',
                                name: '最高点'
                            }]
                        ]
                    }
                }
            ]
        })*/
    })
</script>